import { Form, Input } from 'antd';
import { ModelerService } from '@/pages/workflow/model/components/modeler/ModelerService';
import { useEffect } from 'react';

export const Event = (props: { modelerService: ModelerService }) => {
  const [form] = Form.useForm();

  useEffect(() => {
    form.setFieldsValue({
      eventUrl: props.modelerService?.customerExtension?.eventUrl,
      eventValue: props.modelerService?.customerExtension?.eventValue,
    });
  }, [props.modelerService.element]);

  return (
    <Form layout="vertical" form={form}>
      <Form.Item label="事件地址" name="eventUrl">
        <Input.TextArea
          rows={8}
          onBlur={(event) => {
            props.modelerService.setCustomerExtensionElement(
              'eventUrl',
              event.target.value,
            );
          }}
        />
      </Form.Item>
      <Form.Item label="事件数据" name="eventValue">
        <Input.TextArea
          rows={8}
          onBlur={(event) => {
            props.modelerService.setCustomerExtensionElement(
              'eventValue',
              event.target.value,
            );
          }}
        />
      </Form.Item>
    </Form>
  );
};
